<template>
  <foreignObject  :x="task.x" :y="task.y"  :height="task.height" :width="task.width">
     <body xmlns="http://www.w3.org/1999/xhtml" style="background:#00000000">
        <div class="hover-div"  @mouseenter="handleEnter" @mouseleave="handleLeave" ref="hover">
            <!-- <div :class="getClass" >
                <div class="groups-container">
                    <div class="group-table">
                        <div v-for="item in getTeams"
                                class="group-row flex flex-between-center"
                                :key="item._id">
                                    <div class="user">
                                        <img  :src="item.avator" alt />
                                    </div>
                
                                    <p class="name" :title="item.name">
                                        {{ item.name }}
                                    </p>

                                    <p class="professions">
                                        <span
                                        v-for="p in item.professions"
                                        class="profession-item"
                                        :key="p._id"
                                        >
                                        {{ p.name }}
                                        </span>
                                    </p>
                        </div>
                    </div>
                </div>

            </div> -->
        </div>
     </body>
     
    </foreignObject>
</template>

<script>
export default {
  name: 'HoverGroups',
  inject: ['root'],
  props: ['task'],
  data() {
    return {
    };
  },

  computed: {
    getTeams(){
        return this.task.groupList ||[]
    },

    getClass(){
        return 'groups-area-up'
    }
  },
  methods: {
    handleEnter(event){
      console.log('handleEner =',event)
      
      const hover = this.$refs.hover;
      const {clientWidth,clientHeight} = hover
      const {width:rectWidth,height:rectHeight} = hover.getBoundingClientRect()
      const {clientX,clientY,offsetX,offsetY,layerX,layerY} = event
      const left = clientX - offsetX * (rectWidth/clientWidth)
      const top = clientY - offsetY * (rectHeight/clientHeight)
    //   const {bottom,height,left,right,top,width} = hover.getBoundingClientRect()
      const rect = {height:clientHeight,left,top,width:clientWidth}
    //   console.log('hover.getBoundingClientRect() =',rect)

      this.root.$emit('group-hover-enter',{data:this.task,event,rect}) 
       
    },
    handleLeave(event){
    //   console.log('handleleave =',event)
      this.root.$emit('group-hover-leave',{data:this.task,event}) 
    }
  }
};
</script>
<style lang="scss" scoped>

.flex{
    display:flex;
}

.flex-between-center{
  justify-content: space-between;
  align-items: center;
}

.group-table{
    border-radius: 5px;
    border:1px solid #ccc;
    background: #fff;
    padding: 10px;
    .group-row{
        margin-top: 15px;
        
        &:first-child{
            margin-top: 0px;
        }

        >* {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .user {

            /deep/ img {
                margin-right: 10px;
                width: 32px;
                height: 32px;
                object-fit:cover;
            }
        }
        .name {
            width: 100px;
        }
        .phone {
            width: 106px;
        }
        .number {
            width: 150px;
        }
        .professions {
            width: 220px;
            .profession-item {
                display: inline-block;
                padding: 4px;
                background-color: #f4f4f4;
                color: #646464;
                &:not(:last-child) {
                    margin-right: 5px;
                }
            }
        }
    }
}

.hover-div{
    width:100%;
    height:100%;
    background:#ff000000;
    position:relative;
    
    .groups-area-up{
        transform: scale(0);
        transition: transform 0.1s;
        transform-origin: 50% 100%;
        // pointer-events: none;
        position: absolute;
        left:50%;
        bottom:5px;
        width:5px;
        height:5px;
        
        .groups-container{
            
            position: absolute;
            bottom:0px;
            left:2.5px;
            transform: translateX(-50%);
            padding-bottom: 15px;
            
            &::before{
                content:'';
                position: absolute;
                box-sizing: border-box;
                width:0px;
                height:0px;
                border:10px solid transparent ;
                border-top-color: #ccc; 
                 overflow: hidden;
                left:50%;
                bottom:-5px;
            }
            &::after{
                content:'';
                position: absolute;
                box-sizing: border-box;
                width:0px;
                height:0px;
                border:10px solid transparent ;
                border-top-color: #fff; 
                 overflow: hidden;
                left:50%;
                bottom:-3px;
            }
            
        }
    }

    .groups-area-down{
        transform: scale(0);
        transition: transform 0.1s;
        transform-origin: 50% 0%;
        // pointer-events: none;
        position: absolute;
        left:50%;
        top: calc(100% - 5px);
        width:5px;
        height:5px;
        
        .groups-container{
            
            position: absolute;
            top:0px;
            left:2.5px;
            transform: translateX(-50%);
            padding-top: 15px;
            z-index:999;
            &::before{
                content:'';
                position: absolute;
                box-sizing: border-box;
                width:0px;
                height:0px;
                border:10px solid transparent ;
                border-top-color: #ccc; 
                 overflow: hidden;
                left:50%;
                bottom:-5px;
            }
            &::after{
                content:'';
                position: absolute;
                box-sizing: border-box;
                width:0px;
                height:0px;
                border:10px solid transparent ;
                border-top-color: #fff; 
                 overflow: hidden;
                left:50%;
                bottom:-3px;
            }
            
        }
    }
    &:hover{
        .groups-area-up,
        .groups-area-down{
            transform: scale(1)
        }
    }
}



</style>
